<template>
	<app-layout>
		<view class="mine tn-safe-area-inset-bottom">


			<!-- 顶部自定义导航 -->
			<tn-nav-bar>体检详情
			</tn-nav-bar>
			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
				<view class="about__wrap">
					<view class="about-shadow ">
						<tn-list-view :card="true" unlined="all">
							<view slot="title" class="title tn-flex tn-flex-row-between">
								<view class="tn-text-bold">
									体检信息
								</view>
							</view>
							<block>
								<tn-list-cell>
									<view class="list-icon-text">
										<view class="list__left">体检时间</view>
										<view class="list__right">{{info.tijiantime}}</view>
									</view>
								</tn-list-cell>
								<tn-list-cell>
									<view class="list-icon-text">
										<view class="list__left">体检地址</view>
										<view class="list__right">{{info.tijiandd}}</view>
									</view>
								</tn-list-cell>
								<!-- <tn-list-cell>
									<view class="list-icon-text">
										<view class="list__left">提交时间</view>
										<view class="list__right">{{info.tjtime}}</view>
									</view>
								</tn-list-cell> -->
								
								<tn-list-cell>
									<view class="list-icon-text">
										<view class="list__left">检验人</view>
										<view class="list__right">{{info.tijianuser}}</view>
									</view>
								</tn-list-cell>
							</block>
						</tn-list-view>
					</view>
					<view class="about-shadow tn-margin-top-lg tn-padding-bottom-xl tn-bg-white">
						<tn-list-view :card="true" unlined="all">
							<view slot="title" class="title tn-flex tn-flex-row-between">
								<view class="tn-text-bold">
									问卷照片
								</view>
							</view>
							<block>
								<tn-list-cell>
									<view class="tn-flex">
										<image mode="aspectFit" class="photo" :src="info.questionnaire" @click="preimg"> </image>
									</view>
								</tn-list-cell>
							</block>
						</tn-list-view>
					</view>
					<view class="about-shadow tn-margin-top-lg tn-padding-bottom-xl tn-bg-white" v-if="info.tjresult&&info.tjresult.length>0">
						<tn-list-view :card="true" unlined="all">
							<view slot="title" class="title tn-flex tn-flex-row-between">
								<view class="tn-text-bold">
									检验结果
								</view>
							</view>
							<block>
								<tn-list-cell>
									<view class="tn-flex mphotos"  >
										<image v-for=" (resu,index) in info.tjresult" :key="index" mode="aspectFit" class="photo" :src="resu" @click="preimgr(index)"> </image>
									</view>
								</tn-list-cell>
							</block>
						</tn-list-view>
					</view>

					
					
				</view>


				<view class='tn-tabbar-height'></view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import templatePageMixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'checkdetail',
		mixins: [templatePageMixin],
		data() {
			return {
				page: 1,
				mfid: '',
				id: '',
				info: {},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			} else {
				uni.showModal({
					title: '提示',
					content: '用户不存在，请稍后再试',
					showCancel: false,
					success() {
						this.goBack()
					}
				})
			}
			this.getDetail()
		},
		onReady() {

		},

		methods: {
			preimg() {
				uni.previewImage({
					urls: [this.info.questionnaire]
				})
			},
			preimgr(index) {
				uni.previewImage({
					urls: this.info.tjresult,
					current:index
				})
			},
			getDetail() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.physical.tjdetail,
					data: {
						id: t.id
					},
					method: 'POST'
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						t.info = response.info
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
							success() {
								uni.navigateBack({
									delta: 1,
								})
								return
							}
						});
					}
				}).catch((msg) => {
					t.$t.message.closeLoading();
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 15rpx;

	}

	.list__left {
		min-width: 150rpx;
	}

	.result {
		color: #fff;
		padding: 0 20rpx;
		border-radius: 10rpx;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}




	.tn-margin-xs1 {
		min-width: 170rpx;
	}

	.title {
		padding: 26rpx 30rpx;
	}

	.sign {
		width: 100%;
		height: 300rpx;
	}
	.mphotos{
		flex-wrap: wrap;
	}

	/* 用户头像 start */
	.logo-image {
		width: 150rpx;
		height: 150rpx;
		position: relative;
		overflow: hidden;
		border-radius: 50%;
	}



	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			padding: 20rpx;
		}
	}

	/* 页面 end*/



	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */
</style>